<template>
	<view class="login-container">
		<view class="login-box">
			<text class="title">登录</text>
			
			<!-- 新增头像选择区域 -->
			<view class="avatar-container" @click="chooseAvatar">
				<image :src="avatarUrl" class="avatar"></image>
				<text class="avatar-text">点击更换头像</text>
			</view>
			
			<view class="input-group">
				<input type="text" placeholder="请输入用户名" class="input" v-model="username" />
			</view>
			<view class="input-group">
				<input type="password" placeholder="请输入密码" class="input" v-model="password" />
			</view>
			<button class="login-btn" @click="handleLogin">登录</button>
			<view class="navigate-text">
				<text>没有账号？</text>
				<navigator url="/pages/Register/Register" class="navigate-link">去注册</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '', 
				password: '',
				avatarUrl: '/static/default-avatar.png', // 默认头像（需在static文件夹放置此图片）
				isPwdfocus: false
			};
		},
		methods: {
			// 选择头像方法
			chooseAvatar() {
				uni.chooseImage({
					count: 1, // 只允许选择1张图片
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
					success: (res) => {
						// 成功获取图片后更新头像显示
						this.avatarUrl = res.tempFilePaths[0];
						
						// 这里可以添加头像上传到服务器的逻辑
						// 例如: this.uploadAvatar(res.tempFilePaths[0])
					},
					fail: (err) => {
						uni.showToast({
							title: '选择头像失败',
							icon: 'none'
						});
						console.error('头像选择失败:', err);
					}
				});
			},
			
			// 可选: 上传头像到服务器
			uploadAvatar(tempFilePath) {
				uni.uploadFile({
					url: '你的服务器上传接口', // 替换为你的实际接口地址
					filePath: tempFilePath,
					name: 'avatar', // 服务器端接收的字段名
					formData: {
						'username': this.username // 可以携带额外参数
					},
					success: (uploadRes) => {
						const data = JSON.parse(uploadRes.data);
						if (data.code === 200) {
							console.log('头像上传成功:', data.avatarUrl);
							// 可以保存服务器返回的正式头像地址
						} else {
							uni.showToast({
								title: '头像上传失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '上传失败，请重试',
							icon: 'none'
						});
						console.error('上传失败:', err);
					}
				});
			},

			handleLogin() {
				if (!this.username) {
					return uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
				}
				if (!this.password) {
					return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
				}
				
				// 模拟登录逻辑，实际项目中会替换为真实接口请求
				if(this.username ==="cc" && this.password==="123456"){
					uni.showLoading({
						title:"登录中..."
					})
					setTimeout(()=>{
						uni.hideLoading()
						uni.showToast({
							title:"登录成功"
						})
						
						// 登录成功时可以保存头像信息
						uni.setStorageSync('userAvatar', this.avatarUrl);
						uni.setStorageSync('username', this.username);
						
						uni.navigateTo({
							url:"/pages/index/index"
						})
					},1000)
				}else{
					uni.showToast({
						title:"密码错误，请重新输入",
						icon: 'none'
					});
					this.password=""
					this.isPwdfocus=true
				}
			}
		}
	};
</script>

<style>
	.login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.login-box {
		width: 80%;
		max-width: 400px;
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.title {
		display: block;
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	/* 新增头像样式 */
	.avatar-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30px;
	}
	
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		object-fit: cover;
		border: 2px solid #eee;
		margin-bottom: 10px;
	}
	
	.avatar-text {
		font-size: 14px;
		color: #007aff;
	}

	.input-group {
		margin-bottom: 15px;
	}

	.input {
		width: 100%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	.login-btn {
		width: 100%;
		background-color: #007aff;
		color: #fff;
		border-radius: 4px;
		padding: 10px;
		font-size: 16px;
	}

	.login-btn:active {
		background-color: #0062cc;
	}

	.navigate-text {
		text-align: center;
		margin-top: 15px;
		font-size: 14px;
	}

	.navigate-text text,
	.navigate-text navigator {
		display: inline-block;
	}

	.navigate-link {
		color: #007aff;
		text-decoration: none;
		margin-left: 4px;
	}
</style>